<div class="auth-method-radio-button-wrapper" [ngClass]="{ compact: compact }">
  <ng-container *ngFor="let method of authMethods; index as i">
    <input
      type="radio"
      [disabled]="method.disabled"
      (change)="emitChange()"
      [value]="method.key"
      [id]="method.key"
      [(ngModel)]="selected"
    />
    <label
      class="cnsl-radio-button"
      [ngClass]="{ compact: compact, first: i === 0, last: i === authMethods.length - 1 }"
      [for]="method.key"
    >
      <div
        class="recommended"
        [ngClass]="{ not: method.notRecommended }"
        *ngIf="method.recommended || method.notRecommended"
      >
        {{ (method.recommended ? 'APP.OIDC.RECOMMENDED' : 'APP.OIDC.NOTRECOMMENDED') | translate }}
      </div>

      <div class="cnsl-radio-header" [ngStyle]="{ background: method.background }">
        <span>{{ method.prefix }}</span>
        <div class="current" *ngIf="current === method.key">{{ 'APP.OIDC.CURRENT' | translate }}</div>
      </div>
      <p>{{ method.titleI18nKey | translate }}</p>
      <p class="type-desc cnsl-secondary-text">{{ method.descI18nKey | translate }}</p>
      <span class="fill-space"></span>
      <div class="app-specs cnsl-secondary-text">
        <div class="row" *ngIf="isOIDC && method && method.responseType !== undefined">
          <span class="row-entry">{{ 'APP.OIDC.RESPONSETYPE' | translate }}</span>
          <span>{{ 'APP.OIDC.RESPONSE.' + method.responseType.toString() | translate }}</span>
        </div>
        <div class="row" *ngIf="isOIDC && method.grantType !== undefined">
          <span class="row-entry">{{ 'APP.GRANT' | translate }}</span>
          <span
            ><span class="space" *ngFor="let grant of method.grantType">{{
              'APP.OIDC.GRANT.' + grant.toString() | translate
            }}</span></span
          >
        </div>
        <div class="row" *ngIf="isOIDC && method.authMethod !== undefined">
          <span class="row-entry">{{ 'APP.AUTHMETHOD' | translate }}</span>
          <span>{{ 'APP.OIDC.AUTHMETHOD.' + method.authMethod.toString() | translate }}</span>
        </div>
        <div class="row" *ngIf="!isOIDC && method.apiAuthMethod !== undefined">
          <span class="row-entry">{{ 'APP.AUTHMETHOD' | translate }}</span>
          <span>{{ 'APP.API.AUTHMETHOD.' + method.apiAuthMethod.toString() | translate }}</span>
        </div>
      </div>
    </label>
  </ng-container>
</div>
